<template>
  <div>
    <div class="mb20">
      <span class="index_num success_bg">2</span>
      <b class="f14">工作文件</b>
    </div>
    <div class="worktable mb20">
      <table class="owntable" style="width: 100%;">
        <tr>
          <th class="">
            <div class="flex_start">
              <!-- <span class="red_f">*</span> -->
              规范性操作文件
              <i class="main_co el-icon-circle-plus-outline f16 pointer" style="margin-left: 4px;" @click="addguifan"></i>
            </div>
          </th>
        </tr>
        <tr v-if="form.guifanFileList.length == 0"><td class="white_bg gray_f">添加的文件会显示在此处</td></tr>
        <tr v-for="(item, i) in form.guifanFileList" :key="i">
          <td class="white_bg">
            <div class="flex_between">
              <span class="main_co pointer" @click="preContent(item,'4')">{{ item.name }}</span>
              <div class="flex_end">
                <el-button size="mini" class="ml10" @click="pre(item)" v-if="item.templateCover">封面预览</el-button>
                <i class="el-icon-delete f16 error_f ml10" @click="delguifan(form, i)"></i>
              </div>
            </div>
          </td>
        </tr>
      </table>
      <table class="owntable tableLayout" style="width: 100%;margin-top: 30px;">
        <tr class="">
          <th>
            <div class="flex_start">
              <span class="red_f">*</span>
              记录文件
              <i class="main_co el-icon-circle-plus-outline f16 pointer" style="margin-left: 4px;" @click="addjilu"></i>
            </div>
          </th>
          <th class="">
            <div class="flex_center">
              记录流水编号
              <el-radio checked class="ml10">
                <!-- serialNumberType: '', //   流水编号类型 -->
                {{ serialNumberType == 0 ? '使用系统编号' : '自定义编号' }}
                <el-popover placement="top-start" title="文件版本号规则：" width="240" trigger="hover">
                  <div class="mb10 deepgray_f">RD------记录文件</div>
                  <div class="deepgray_f">XX-----版本号</div>
                  <div class="deepgray_f">xxxx---------年月日(当前日期，8位)</div>
                  <i slot="reference" class="el-icon-warning f18 gray_f ml10"></i>
                </el-popover>
              </el-radio>
              <span class="warn_f">流水号复制到记录文件中</span>
            </div>
          </th>
        </tr>
        <tr v-if="form.jiluFileList.length == 0">
          <td class="white_bg gray_f">添加的文件会显示在此处</td>
          <td class="white_bg gray_f"></td>
        </tr>
        <tr v-for="(item, i) in form.jiluFileList" :key="i">
          <td class="white_bg">
            <div class="flex_between">
              <el-popover placement="top-start" trigger="hover" v-if="item.isEncryption == 1">
                <div class="mb10 deepgray_f">请先申请文件解密</div>
                <div class="pointer" slot="reference"><span class="main_co">{{ item.name }}</span><i class="el-icon-lock ml10 f14"></i></div>
              </el-popover>
              <!-- @click="showWpsHandel" -->
              <span class="main_co pointer" @click="preContent(item,'2')" v-else>{{ item.name }}</span>
              <div>
                <!-- <span class="gray_f">2021-09-27 15:29 编辑</span> -->
                <el-popover placement="top-start" trigger="hover" v-if="item.isEncryption == 1">
                  <div class="mb10 deepgray_f">请先申请文件解密</div>
                  <el-button size="mini" class="ml10"  v-if="item.templateCover">封面预览</el-button>
                </el-popover>
                <el-button size="mini" class="ml10" @click="pre(item)" v-if="item.templateCover && item.isEncryption != 1">封面预览</el-button>
                <i class="el-icon-delete f16 error_f ml10 pointer" @click="deljilu(form, i)"></i>
              </div>
            </div>
          </td>
          <td>
            <div class="flex_center">
                            <el-input class="w160" size="small" v-model="item.serialNumber" :readonly="serialNumberType == 0?true:false" placeholder="请输入流水编号"></el-input>
<!--              <span class="w160 border" v-if="serialNumberType == 0">{{ item.serialNumber }}</span>
              <el-input class="w160" v-if="serialNumberType == 1" size="small" v-model="item.serialNumber"  placeholder="请输入流水编号"></el-input> -->
              <el-button size="mini" class="ml10 copy" @click="onCopy(item.serialNumber)">复制</el-button>
            </div>
          </td>
        </tr>
      </table>
    </div>
    <div class="f12">
      <span class="red_f">*</span>
      记录保留期限（年）：
      <el-input size="small" v-model="form.retentionPeriod" placeholder="≥2" style="width: 160px;" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
    </div>

    <specification-file ref="specificationFile" @confirm="onFileConfirm($event, form)"></specification-file>
    <log-file ref="logFile" @confirm="onFileConfirm($event, form)"></log-file>
    <pdf :pdfUrl="src" ref="pdf"></pdf>
  </div>
</template>

<script>
import { getguifanList } from '@/api/myapi/tixiwenjian';
import pdf from '../pdf/index.vue';
export default {
  props: {
    form: {}
  },
  components: {
    pdf
  },
  data() {
    return {
      src: '',
      currentActive: 0,
      showAction: false,
      dialogTitle: '规范文件',
      retentionPeriod: '',
      jiluList: [],
      guifanList: [],
      allguifanList: [],
      alljnluList: [],
      defaultCheckedKeys: []
    };
  },
  methods: {
    pre(item) {
      if (item.templateCover) {
        this.src = item.templateCover;
        this.$refs.pdf.open();
      }
    }

  }
};
</script>

<style></style>
